<template>
  <Tabs
    tab-position="bottom"
    :class="{ 'je-func-layout-tabs': true, 'router-view': $route.name === ConfigRouteName }"
  >
    <TabPane v-for="tab in options" :key="tab.key">
      <template #tab>
        <i v-if="tab.icon" :class="tab.icon"></i>
        {{ tab.text }}
      </template>
      <slot name="pane" :tab="tab.key"></slot>
    </TabPane>
    <template #leftExtra>
      <slot name="leftExtra"></slot>
    </template>
    <template #rightExtra>
      <slot name="rightExtra"></slot>
    </template>
  </Tabs>
</template>
<script>
  import { defineComponent } from 'vue';
  import { Tabs } from '@jecloud/ui';
  import { ConfigRouteName } from '@/router';
  export default defineComponent({
    name: 'FuncLayoutTabs',
    components: { Tabs, TabPane: Tabs.TabPane },
    props: {
      options: Array,
    },
    setup() {
      return { ConfigRouteName };
    },
  });
</script>
<style lang="less">
  .je-func-layout-tabs {
    height: 100%;

    &.ant-tabs {
      .ant-tabs-nav {
        margin: 0;
      }
      .ant-tabs-tabpane {
        & > * {
          height: 100%;
          width: 100%;
        }
      }
      &.ant-tabs-card {
        border-radius: 0 0 0 6px;
        &.router-view {
          border-radius: 0;
        }
        .ant-tabs-tab {
          background: none;
          border: 0;
          transition: none;
          &.ant-tabs-tab-active {
            background-color: @primary-color;
            > .ant-tabs-tab-btn {
              color: @white;
              transition: none;
            }
          }
        }
      }
    }
  }
</style>
